layui.use(['table','form','element'], function(){
    var table = layui.table;
    var form = layui.form;
    var element = layui.element;
    var layer = layui.layer;

    var $ = layui.$;
    //控制table工具栏按钮权限
    $.ajax({
        url: serverUrl + '/btn/html',
        data: {modulePath: '/sys/role'},
        dataType: 'json',
        success: function (result) {
            $("#barDemo").html(result.data);
        },
        error: function (xhr) {
            layer.msg('error');
        }
    })
    //第一个实例
    table.render({
        elem: '#demo'
        ,url: serverUrl + '/sys/role/list' //数据接口
        ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
        }
        ,limits: [5,10,20]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
        ,limit: 5 //每页默认显示的数量
        ,cols: [[ //表头
            {field: 'id', title: 'ID', width:180, sort: true, fixed: 'left'}
            ,{field: 'name', title: '角色名', width:180}
            ,{field: 'nameZh', title: '中文名', width:180}
            ,{fixed: 'right', title: '操作', width:220, align:'center', toolbar: '#barDemo'}
        ]]
        ,response:{
            statusName:'code', //规定返回的状态码字段为code
            statusCode:'200' //规定成功的状态码味200
        }
        ,parseData: function(res){ //res 即为原始返回的数据
            console.log(res.data);
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.list //解析数据列表
            };
        }
    });


    //监听表格复选框选择
    table.on('checkbox(demo)', function(obj){
        console.log(obj)
    });
    //监听工具条
    table.on('tool(demo)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('ID：'+ data.id + ' 的查看操作');
        } else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
                $.ajax({
                    url: serverUrl + "/sys/role/del?id=" + data.id,
                    dataType: 'json',
                    success: function (result) {
                        table.reload('demo');
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                })
            });
        } else if(obj.event === 'edit'){
            layer.alert('编辑行：<br>'+ JSON.stringify(data))
        }
    });

    var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
            var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        }
        ,getCheckLength: function(){ //获取选中数目
            var checkStatus = table.checkStatus('idTest')
                ,data = checkStatus.data;
            layer.msg('选中了：'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
            var checkStatus = table.checkStatus('idTest');
            layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
    };

    $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});
